<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职业风格问卷 (保留原分组)</title>
    <style>
        :root {
            --primary-color: #007bff;
            --light-gray: #f0f2f5;
            --dark-gray: #333;
            --border-color: #dee2e6;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--light-gray);
            color: var(--dark-gray);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        #app-container {
            width: 100%;
            max-width: 900px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 1.8em;
        }

        main {
            padding: 30px;
        }

        #welcome-screen, #end-screen {
            text-align: center;
        }
        #welcome-screen p, #end-screen p {
            font-size: 1.1em;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .question-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .question-table th, .question-table td {
            border: 1px solid var(--border-color);
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .question-table th {
            background-color: var(--light-gray);
            font-size: 0.8em;
            font-weight: normal;
        }

        .question-table td:first-child {
            text-align: left;
            width: 40%;
        }

        /* Custom Radio Buttons */
        .rating-cell input[type="radio"] {
            display: none;
        }
        .rating-cell label {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ccc;
            cursor: pointer;
            position: relative;
        }
        .rating-cell input[type="radio"]:checked + label {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .rating-cell input[type="radio"]:checked + label::after {
            content: '●';
            color: white;
            font-size: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1;
        }


        #navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        
        #page-indicator {
            font-style: italic;
            color: #6c757d;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        button:disabled {
            background-color: #a0c7ff;
            cursor: not-allowed;
        }

        /* Modal for Forced Choice */
        #modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            display: none; /* Initially hidden */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #modal-content {
            background: white;
            padding: 30px;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .forced-choice-table {
            width: 100%;
            border-collapse: collapse;
        }
        .forced-choice-table th, .forced-choice-table td {
             border: 1px solid var(--border-color);
             padding: 12px;
             text-align: center;
        }
        .forced-choice-table td:first-child {
            text-align: left;
        }
        .forced-choice-table th {
            background-color: var(--light-gray);
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>

<div id="app-container">
    <header>
        <h1>职业风格问卷</h1>
    </header>
    <main>
        <div id="welcome-screen">
            <h2>欢迎参加测评</h2>
            <p>此问卷将请您提供有关您在工作中的偏好、需要和才能的信息。问卷将按照原始文档的分组呈现，每页显示一组陈述句。您需要对每个陈述句以9点的尺度进行评分。</p>
            <p>如果您对两个或多个陈述句给了相同的评分，系统会请您指出哪一个“最接近您”以及哪一个“最不接近您”。</p>
            <p>请诚实作答，本测评没有时间限制，但建议快速、凭直觉作答。</p>
            <button id="start-btn">开始测评</button>
        </div>

        <div id="test-screen" class="hidden">
            <div id="question-container"></div>
            <div id="navigation">
                <span id="page-indicator"></span>
                <button id="next-btn">继续</button>
            </div>
        </div>

        <div id="end-screen" class="hidden">
            <h2>测评完成</h2>
            <p>感谢您的作答！您的所有回答都已记录。请点击下方的按钮生成并下载您的专属测评结果文件。</p>
            <p>您可以将下载的 .txt 文件内容完整地复制给 GPT，以获得一份详细的性格分析报告。</p>
            <button id="download-btn">生成并下载结果</button>
        </div>
    </main>
</div>

<!-- Modal for Forced Choice -->
<div id="modal-overlay">
    <div id="modal-content">
        <h3>评分冲突</h3>
        <p>您对以下多个选项给出了相同的分数。请指明哪一项 **最接近您**，哪一项 **最不接近您**。</p>
        <div id="forced-choice-container"></div>
        <div style="text-align: right; margin-top: 20px;">
            <button id="modal-submit-btn">确认</button>
        </div>
    </div>
</div>

<script>
    // ** NEW: Preserving original question groups from the document **
    const questionGroups_Original = [
        // Demo Group from Instructions
        ["我是一个竞争心很强的人", "我喜欢挑战他人的想法", "我享受独自工作", "大部分时间我都是快乐的", "我更愿意领导别人", "我善于与他人建立融洽关系"],
        // Group 1
        ["我从发现商业良机中获得真正的满足感", "我喜欢结识陌生人", "我觉得我必须参考他人的观点", "我必须找到解决问题的办法", "守时是我的一个重要原则", "我从制定策略中得到真正的满足感"],
        // Group 2 (repeated 3 times in doc, we'll show it once)
        ["我能想出很多主意", "我善于照章行事", "我通过阅读学到了很多东西", "我是一个宽容的人", "我能很快跟别人建立融洽的关系", "我善于着手开展工作"],
        // Group 3
        ["我善于处理不确定的事情", "我善于发现如何对事情进行改进", "我善于理解人们行为背后的动机", "人们都说我能给人留下良好的第一印象", "我善于谈判", "我已经准备好随时做出重要决策"],
        // Group 4 (repeated 2 times in doc)
        ["我希望能负责重大决策", "我喜欢把问题解释清楚", "我需要了解论点背后的逻辑", "我更喜欢低风险的选择", "我渴望能迅速从挫折中恢复", "我喜欢抽象思考"],
        // Group 5
        ["我喜欢协调各方人员", "我想让别人倾听我的观点", "我相信我能决定自己的未来", "我喜欢写作", "我需要对任务的优先级作出明确的安排", "我对变化秉持积极的态度"],
        // Group 6 (repeated 2 times in doc)
        ["我善于长远思考", "保守秘密是我的最大长处之一", "我非常注意细节", "我善于处理数字资料", "我信任他人", "我善于辨识商机"],
        // Group 7
        ["我认为取得突出的成绩很重要", "我希望人们为他们的观点提出论据", "我希望大家能够一起参与最终的决策", "我觉得认可自己很重要", "我喜欢快速学习新事物", "我喜欢同时处理多件事情"],
        // Group 8
        ["我鼓励其他人对我的方法提出批评", "我避免风险较大的决策", "我仅根据客观事实做决策", "在重大活动期间,我很少会紧张", "我通常是人们关注的焦点", "我很少改变主意"],
        // Group 9
        ["我认为能激励别人很重要", "建立融洽的关系对我来说相重要", "我需要肯定自己的价值", "我喜欢分析信息", "我觉得保守秘密很重要", "我喜欢运用理论"],
        // Group 10 (repeated 2 times in doc)
        ["我采取激进的方法解决问题", "我能组合出有效的计划", "我能够立刻意识到某些事的可行性", "我善于让生气的人冷静下来", "我容易和人争辩", "我善于推销"],
        // Group 11 (repeated 2 times in doc)
        ["我能够很好地分出工作的轻重缓急", "我寻找学习新事物的机会", "我对自己非常认可", "我善于参考他人的观点", "我让人们注意到我的成就", "我取得了突出的成绩"],
        // Group 12 (repeated 2 times in doc)
        ["我急于采取行动", "我希望我能给人们带来启发", "我觉得建立人际网络很重要", "我觉得争端必须解决", "我做事不喜欢半途而废", "我很享受新事物带来的挑战"],
        // Group 13
        ["我善于将理论应用于实践", "我能够很快从挫折中恢复过来", "我擅长遵守规则", "我善于发现相关事实信息", "我善于挑战他人的观点", "领导能力是我的一大优势"],
        // Group 14
        ["我倾向于快速决策", "当我不同意别人的意见时我会告诉他", "我觉得自己可以从容自若地应对情绪不安的人", "我喜欢做实操性的工作", "我觉得待人接物符合伦理道德很重要", "我需要知道自己表现的如何"],
        // Group 15
        ["我是一个乐观的人", "我善于自我管理", "利用信息科技是我的一大优势", "我善于体会他人的感受", "在结识陌生人时,我充满自信", "我善于寻找方法来激励他人"],
        // Group 16
        ["我希望对事物进行掌控", "我觉得理解他人的感受很重要", "我喜欢处理数字资料", "我是一个完美主义者", "我觉得人们信守承诺相当重要", "我需要有明确的远景规划"],
        // Group 17
        ["面对他人的反馈意见,我能作出积极反应", "我善于完成任务", "我能够了解论点背后的逻辑", "我非常肯定自己的价值", "我能有力地表达自己的观点", "我是一个求胜心很强的人"],
        // Group 18
        ["我认为无论在任何情况下,我都必须持之以恒", "我很爱说话", "我觉得在重大活动前没有必要担心", "我想立即抓住主要问题", "我想要确保细节准确", "我觉得完全了解事物的底层原理很有趣"],
        // Group 19
        ["我能够为未来规划一个令人振奋的远景", "我善于快节奏地工作", "我善于分析信息", "我善于让大家一起参与最终的决策", "我会公开表达对他人的反对意见", "我善于快速决策"],
        // Group 20 (repeated 2 times in doc)
        ["我总觉得有采取行动的必要", "我很希望能给人留下良好的第一印象", "我喜欢倾听他人", "我喜欢通过阅读来学习", "我需要有章可循", "我喜欢提出独到的见解"],
        // Group 21
        ["我能很好地应对变化", "我的行为符合伦理道德", "人们说我有丰富的常识", "我善于应对情绪不好的人", "当我工作出色时会寻求赞赏", "人们都说我善于协调各方人员"],
        // Group 22
        ["我希望能真正地鼓励他人", "我希望人们知道我的成功", "我觉得为他人着想是相当重要的", "我觉得信息技术非常有趣", "我非常喜欢工作繁忙", "我倾向于保持乐观的态度"],
        // Group 23
        ["我善于提出新概念", "人们认为我是一个做事周密彻底的人", "我善于洞察问题的实质", "在重大活动前,我能保持冷静", "我很健谈", "我很有雄心"],
        // Group 24
        ["我对大多数问题持强烈的观点", "我非常喜欢充满活力的感觉", "我认为宽容待人很重要", "学习新事物的机会能给我带来动力", "我喜欢做事井井有条", "我喜欢思考未来"],
        // Group 25
        ["我是一个开心的人", "我能够确保高质量水平", "我通过实践来学习", "我善于在团队中工作", "我是一个有说服力的人", "我善于促使事情发生"],
        // Group 26
        ["我需要胜利", "我想要说服他人接受我的观点", "我喜欢结交新朋友", "我认为信任他人很重要", "对于事情是否可行,我相信我的直觉判断", "我想知道我的方法出了什么差错"],
        // Group 27
        ["我善于想出不同寻常的主意", "我一向准时到达", "我善于做实操性的任务", "我善于提出探索性的问题", "我能在有压力的环境下很好地工作", "我擅长做演讲陈述"]
    ];

    // --- App State ---
    let questionGroups = [];
    let currentPageIndex = 0;
    let userAnswers = {}; // { questionText: score }
    let forcedChoiceResults = []; // [{ score: 7, items: [...], most: '...', least: '...'}, ...]
    let tiedGroupsQueue = [];

    // --- DOM Elements ---
    const welcomeScreen = document.getElementById('welcome-screen');
    const testScreen = document.getElementById('test-screen');
    const endScreen = document.getElementById('end-screen');
    const startBtn = document.getElementById('start-btn');
    const nextBtn = document.getElementById('next-btn');
    const downloadBtn = document.getElementById('download-btn');
    const questionContainer = document.getElementById('question-container');
    const pageIndicator = document.getElementById('page-indicator');
    const modalOverlay = document.getElementById('modal-overlay');
    const modalContent = document.getElementById('modal-content');
    const modalSubmitBtn = document.getElementById('modal-submit-btn');
    const forcedChoiceContainer = document.getElementById('forced-choice-container');

    const RATING_LABELS = [
        "非常强烈地<br>不同意", "强烈<br>不同意", "不同意", "轻微<br>不同意", "不确定",
        "轻微<br>同意", "同意", "强烈<br>同意", "非常强烈地<br>同意"
    ];
    const RATING_MAP = {
        1: "非常强烈地不同意", 2: "强烈不同意", 3: "不同意", 4: "轻微不同意", 5: "不确定",
        6: "轻微同意", 7: "同意", 8: "强烈同意", 9: "非常强烈地同意"
    };

    // --- Functions ---
    function initTest() {
        // ** MODIFIED: Use the pre-defined groups directly **
        questionGroups = questionGroups_Original;

        welcomeScreen.classList.add('hidden');
        testScreen.classList.remove('hidden');
        renderCurrentPage();
    }
    
    function renderCurrentPage() {
        const group = questionGroups[currentPageIndex];
        let tableHeader = RATING_LABELS.map(label => `<th>${label}</th>`).join('');
        let tableRows = group.map((q, index) => {
            const questionId = `q-${currentPageIndex}-${index}`;
            let ratingCells = '';
            for (let i = 1; i <= 9; i++) {
                ratingCells += `<td class="rating-cell">
                                <input type="radio" id="${questionId}-r${i}" name="${questionId}" value="${i}">
                                <label for="${questionId}-r${i}"></label>
                               </td>`;
            }
            return `<tr><td>${q}</td>${ratingCells}</tr>`;
        }).join('');

        questionContainer.innerHTML = `
            <table class="question-table">
                <thead><tr><th></th>${tableHeader}</tr></thead>
                <tbody>${tableRows}</tbody>
            </table>
        `;
        pageIndicator.textContent = `第 ${currentPageIndex + 1} 页 / 共 ${questionGroups.length} 页`;
    }
    
    function handleNextClick() {
        const currentGroup = questionGroups[currentPageIndex];
        const scoresOnPage = {};

        // 1. Validate and collect answers
        for (let i = 0; i < currentGroup.length; i++) {
            const questionText = currentGroup[i];
            const radioName = `q-${currentPageIndex}-${i}`;
            const selectedRadio = document.querySelector(`input[name="${radioName}"]:checked`);
            
            if (!selectedRadio) {
                alert('请完成本页所有题目再继续！');
                return;
            }
            const score = parseInt(selectedRadio.value);
            userAnswers[questionText] = score;

            if (!scoresOnPage[score]) {
                scoresOnPage[score] = [];
            }
            scoresOnPage[score].push(questionText);
        }

        // 2. Check for tied scores
        tiedGroupsQueue = Object.entries(scoresOnPage)
                                .filter(([score, items]) => items.length > 1)
                                .map(([score, items]) => ({ score: parseInt(score), items }));
        
        processTiedGroups();
    }

    function processTiedGroups() {
        if (tiedGroupsQueue.length > 0) {
            const tiedGroup = tiedGroupsQueue.shift(); // Get the next group to process
            renderForcedChoiceModal(tiedGroup);
        } else {
            advanceToNextPage();
        }
    }

    function advanceToNextPage() {
        currentPageIndex++;
        if (currentPageIndex < questionGroups.length) {
            renderCurrentPage();
        } else {
            showEndScreen();
        }
    }
    
    function renderForcedChoiceModal({ score, items }) {
        let tableRows = items.map((item, index) => {
            return `
                <tr>
                    <td>${item}</td>
                    <td><input type="radio" name="forced-choice-most" value="${item}"></td>
                    <td><input type="radio" name="forced-choice-least" value="${item}"></td>
                </tr>
            `;
        }).join('');
        
        forcedChoiceContainer.innerHTML = `
            <table class="forced-choice-table">
                <thead>
                    <tr><th>陈述句 (您的评分为: ${score})</th><th>最接近您</th><th>最不接近您</th></tr>
                </thead>
                <tbody>${tableRows}</tbody>
            </table>
        `;
        modalOverlay.style.display = 'flex';
    }

    function handleModalSubmit() {
        const mostRadio = document.querySelector('input[name="forced-choice-most"]:checked');
        const leastRadio = document.querySelector('input[name="forced-choice-least"]:checked');

        if (!mostRadio || !leastRadio) {
            alert('请选择“最接近您”和“最不接近您”的选项。');
            return;
        }

        if (mostRadio.value === leastRadio.value) {
            alert('“最接近您”和“最不接近您”不能是同一个选项。');
            return;
        }

        const currentTiedGroup = forcedChoiceContainer.querySelector('tbody');
        const items = Array.from(currentTiedGroup.rows).map(row => row.cells[0].textContent);
        const score = parseInt(forcedChoiceContainer.querySelector('th').textContent.match(/\d+/)[0]);

        forcedChoiceResults.push({
            score: score,
            items: items,
            most: mostRadio.value,
            least: leastRadio.value
        });

        modalOverlay.style.display = 'none';
        processTiedGroups(); // Process next tied group or advance page
    }

    function showEndScreen() {
        testScreen.classList.add('hidden');
        endScreen.classList.remove('hidden');
    }

    function generateReport() {
        let report = `# 性格测评结果分析 (基于原始分组)\n\n生成时间: ${new Date().toISOString()}\n\n---\n\n`;

        report += `## 第一部分：9点量表评分 (按原始分组呈现)\n\n`;
        questionGroups_Original.forEach((group, index) => {
            report += `### 原始分组 ${index + 1}\n`;
            group.forEach(question => {
                const score = userAnswers[question] || '未作答';
                const ratingText = score !== '未作答' ? `(${RATING_MAP[score]})` : '';
                report += `- ${question}: ${score} ${ratingText}\n`;
            });
            report += '\n';
        });

        report += `---

## 第二部分：强制选择结果

当多个项目评分相同时，用户被要求选择最符合和最不符合的陈述。

`;
        if (forcedChoiceResults.length > 0) {
            forcedChoiceResults.forEach(result => {
                report += `
- 评分组 (得分: ${result.score})
  - 选项: ${JSON.stringify(result.items)}
  - **最接近我**: ${result.most}
  - **最不接近我**: ${result.least}
`;
            });
        } else {
            report += "本次测评未触发强制选择。\n";
        }
        
        report += `
---
## 待分析任务

请基于以上两个部分的数据，对该用户的职业性格、行为偏好、潜在优势和可能面临的挑战进行全面、深入的分析。请特别关注：
1.  **高分项和低分项**: 体现了哪些强烈的个人特质和不倾向的行为模式？
2.  **分组内的评分模式**: 在同一组内，用户的评分是否存在特定模式（如普遍偏高或偏低，或同时对看似矛盾的选项给出高分）？
3.  **强制选择结果**: 揭示了在相似倾向中，用户更核心的自我认知是什么？例如，同样是“同意”，用户认为自己“最”像什么，“最不”像什么？
4.  **模式与冲突**: 数据中是否存在一些有趣的模式（如同时在创新和守序上得分高）或潜在的内在冲突？
5.  **岗位匹配度**: 结合常见的岗位需求（如管理、技术、销售、支持等），分析该用户可能更适合哪类工作环境。
`;

        return report;
    }

    function downloadReport() {
        const reportText = generateReport();
        const blob = new Blob([reportText], { type: 'text/plain;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '性格测评结果_保留原分组.txt';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    // --- Event Listeners ---
    startBtn.addEventListener('click', initTest);
    nextBtn.addEventListener('click', handleNextClick);
    modalSubmitBtn.addEventListener('click', handleModalSubmit);
    downloadBtn.addEventListener('click', downloadReport);

</script>

</body>
</html>